<template>
  <div class="asset-management" :style="{ backgroundImage: `url(${backgroundImage})`, backgroundPosition: 'center' }">
    <!-- 创建echarts图 -->
    <div v-for="chart in charts" :key="chart.id">
      <vue-draggable-resizable :w="chart.width" :h="chart.height" :x="chart.x" :y="chart.y"
        @resizing="(newWidth, newHeight) => onResize(chart.id, newWidth, newHeight)"
        @dragging="(x, y) => onDrag(chart.id, x, y)">
        <div :ref="el => setChartRef(el, chart.id)" class="chart-box"></div>
        <button @click="removeChart(chart.id)" class="delete-btn">删除</button>
      </vue-draggable-resizable>
    </div>

    <!-- 创建文字 -->
    <div v-for="text in texts" :key="text.id">
      <vue-draggable-resizable :w="text.width" :h="text.height" :x="text.x" :y="text.y"
        @dragging="(x, y) => onTextDrag(text.id, x, y)">
        <div class="text-box" :style="{ color: text.color }">{{ text.content }}</div>
        <button @click="removeText(text.id)" class="delete-btn">删除</button>
      </vue-draggable-resizable>
    </div>
    <!-- 上传背景图片的对话框 -->
    <el-dialog title="" class="el-dialog__header upload-bg" :visible.sync="uploadDialogVisible" top="18%" width="22%" :before-close="handleCloseUpload">
      <template slot="title">
        <div class="addDataBtnBox" style="z-index:999;cursor: pointer;"><i class="el-icon-check" /></div>
        <p class="dialog-title">{{title}}</p>
      </template>
      <el-upload class="upload-box" action="" :show-file-list="false" :before-upload="handleUpload" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将图片拖拽到此处，或 <em>点击上传</em></div>
      </el-upload>
    </el-dialog>
    <!-- 柱状图 -->
    <el-dialog title="" class="el-dialog__header upload-histogram" :visible.sync="energyModel" top="16%" width="24%" :before-close="handleClose">
      <template slot="title">
        <div class="addDataBtnBox" style="z-index:999;cursor: pointer;" @click="confirmBarChart"><i class="el-icon-check" /></div>
        <p class="dialog-title">{{title}}</p>
      </template>
      <div class="item-box">
        <span style="margin-right: 10px;">描述:</span>
        <div class="inp-box" style="width: 90%;">
          <el-input v-model="customFloor" placeholder="请输入描述信息" />
        </div>
      </div>
      <div class="item-box">
        <span style="margin-right: 10px;">y轴最大值:</span>
        <div style="width: 55px;">
          <el-input v-model="yAxisMaxBar" placeholder="" />
        </div>
        <span style="margin-right: 10px;margin-left: 20px;">y轴最小值:</span>
        <div style="width: 55px;">
          <el-input v-model="yAxisMinBar" placeholder="" />
        </div>
        <span style="margin-left: 20px;margin-right: 10px;">y轴单位:</span>
        <div style="width: 55px;">
          <el-input v-model="yAxisUnitBar" placeholder="" />
        </div>
      </div>
      <div class="item-box">
        <span style="margin-right: 10px;">时间范围:</span>
        <div style="width: 180px;">
          <el-input placeholder="多少小时之内" />
        </div>
      </div>
      <div style="font-size: 11px; color: #1890FF;margin-top: 5px;cursor: pointer;" @click="addBarChartData">选择数据</div>
      <div class="data-box">
        <el-table :data="barChartData" style="width: 100%" size="mini" element-loading-background="rgba(0, 0, 0, 0)"
          :stripe="false" :height="180" border :header-cell-style="{
            background: '#252526',
            color: '#c7c7c9',
            border: '1px solid #4e4c4c',
          }">
          <el-table-column label="名称" prop="name" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" placeholder="请输入名称"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="颜色" prop="color" width="50">
            <template slot-scope="scope">
              <el-color-picker v-model="scope.row.color" show-alpha></el-color-picker>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="50">
            <template slot-scope="scope">
              <span style="font-size: 11px;">删除</span>
              <!-- <el-button type="text" @click="removeBarChartData(scope.$index)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!--  饼状图 -->
    <el-dialog title="" :visible.sync="energyModelPie" top="16%" width="24%" :before-close="handleClosePie">
      <template slot="title">
        <div class="addDataBtnBox" style="z-index:999;cursor: pointer;" @click="confirmPieChart"><i class="el-icon-check" /></div>
        <p class="dialog-title">{{title}}</p>
      </template>
      <div class="item-box">
        <span style="margin-right: 10px;">描述:</span>
        <div class="inp-box" style="width: 90%;">
          <el-input v-model="customFloor" placeholder="请输入描述信息" />
        </div>
      </div>
      <div style="font-size: 11px; color: #1890FF;margin-top: 5px;cursor: pointer;" @click="addPieChartData">选择数据</div>
      <div class="data-box">
        <el-table :data="pieChartData" style="width: 100%" size="mini" element-loading-background="rgba(0, 0, 0, 0)"
          :stripe="false" :height="180" border :header-cell-style="{
            background: '#252526',
            color: '#c7c7c9',
            border: '1px solid #4e4c4c',
          }">
          <el-table-column label="名称" prop="name">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" placeholder="请输入名称"></el-input>
            </template>
          </el-table-column>
          <!--  <el-table-column label="值" prop="value">
            <template slot-scope="scope">
              <el-input v-model="scope.row.value" placeholder="请输入值"></el-input>
            </template>
          </el-table-column> -->
          <el-table-column label="颜色" prop="color" width="60">
            <template slot-scope="scope">
              <el-color-picker v-model="scope.row.color" show-alpha></el-color-picker>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="60">
            <template slot-scope="scope">
              <!-- <el-button type="text" @click="removePieChartData(scope.$index)">删除</el-button> -->
              <span style="font-size: 11px;">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- 曲线图 -->
    <el-dialog title="" :visible.sync="energyModelLine" top="15%" width="24%" :before-close="handleCloseLine">
      <template slot="title">
        <div class="addDataBtnBox" style="z-index:999;cursor: pointer;" @click="confirmLineChart"><i class="el-icon-check" /></div>
        <p class="dialog-title">{{title}}</p>
      </template>
      <div class="item-box">
        <span style="margin-right: 10px;">描述:</span>
        <div class="inp-box" style="width: 90%;">
          <el-input v-model="customFloor" placeholder="请输入描述信息" />
        </div>
      </div>
      <div class="item-box">
        <span style="margin-right: 10px;">y轴最大值:</span>
        <div style="width: 55px;">
          <el-input v-model="yAxisMaxLine" placeholder="" />
        </div>
        <span style="margin-right: 10px;margin-left: 20px;">y轴最小值:</span>
        <div style="width: 55px;">
          <el-input v-model="yAxisMinLine" placeholder="" />
        </div>
        <span style="margin-left: 20px;margin-right: 10px;">y轴单位:</span>
        <div style="width: 55px;">
          <el-input v-model="yAxisUnitLine" placeholder="" />
        </div>
      </div>
      <div class="item-box">
        <span style="margin-right: 10px;">曲线类型:</span>
        <div style="width: 200px;display: flex;">
          <div style="width: 100px;"><el-radio v-model="radio" label="1">实时数据</el-radio></div>
          <div style="width: 100px;"><el-radio v-model="radio" label="2">趋势数据</el-radio></div>
        </div>
      </div>
      <div class="item-box">
        <span style="margin-right: 10px;">时间范围:</span>
        <div style="width: 180px;">
          <el-input placeholder="多少小时之内" />
        </div>
      </div>
      <div style="font-size: 11px; color: #1890FF;margin-top: 5px;cursor: pointer;" @click="addLineChartData">选择数据</div>
      <div class="data-box">
        <el-table :data="lineChartData" style="width: 100%" size="mini" element-loading-background="rgba(0, 0, 0, 0)"
          :stripe="false" :height="180" border :header-cell-style="{
            background: '#252526',
            color: '#c7c7c9',
            border: '1px solid #4e4c4c',
          }">
          <el-table-column label="名称" prop="name">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" placeholder="请输入名称"></el-input>
            </template>
          </el-table-column>
          <!--  <el-table-column label="值" prop="value">
            <template slot-scope="scope">
              <el-input v-model="scope.row.value" placeholder="请输入值"></el-input>
            </template>
          </el-table-column> -->
          <el-table-column label="颜色" prop="color" width="60">
            <template slot-scope="scope">
              <el-color-picker v-model="scope.row.color" show-alpha></el-color-picker>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="60">
            <template slot-scope="scope">
              <!-- <el-button type="danger" @click="removeLineChartData(scope.$index)">删除</el-button> -->
              <span style="font-size: 11px;">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- 文本框 -->
    <el-dialog title="" :visible.sync="showTextDialog" top="20%" width="24%" :before-close="handleCloseText">
      <template slot="title">
        <div class="addDataBtnBox" style="z-index:999;cursor: pointer;" @click="addText"><i class="el-icon-check" /></div>
        <p class="dialog-title">{{title}}</p>
      </template>
      <div class="item-box">
        <span style="margin-right: 10px;">内容:</span>
        <div class="inp-box" style="width: 90%;">
          <el-input v-model="textContent" placeholder="请输入内容" />
        </div>
      </div>
      <div class="item-box">
        <span style="margin-right: 10px;">颜色:</span>
        <el-color-picker v-model="textColor" style="margin-top: 10px;"></el-color-picker>
      </div>
    </el-dialog>
    <!-- 超链接 -->

  </div>
</template>

<script>
import bus from '../../../utils/eventBus.js'
import * as echarts from 'echarts';
import VueDraggableResizable from 'vue-draggable-resizable';
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
export default {
  data() {
    return {
      charts: [],
      texts: [],
      chartCounter: 0,
      textCounter: 0,
      chartInstances: {},
      textContent: '',
      textColor: '#000000',
      title: "创建饼状图",
      energyModel: false,
      energyModelPie: false,
      energyModelLine: false,
      showTextDialog: false,
      backgroundImage: "", // 存储背景图片
      uploadDialogVisible: false, // 控制上传对话框的显示
      customFloor: "",
      radio: '1',
      dataTable: [{
        name: '能耗数据1',
        color: '#409EFF'
      }, {
        name: '能耗数据2',
        color: '#409EFF'
      }],
      dataColor: "#409EFF",
      pieChartData: [
        { name: 'A', value: 10, color: '#ff4500' },
        { name: 'B', value: 20, color: '#ff8c00' },
        { name: 'C', value: 30, color: '#ffd700' }
      ], // 伪造的假数据
      pendingChartType: null,
      yAxisMaxBar: 100,
      yAxisMinBar: 0,
      yAxisUnitBar: '%',
      barChartData: [
        { name: 'A', value: 10, color: '#ff4500' },
        { name: 'B', value: 20, color: '#ff8c00' },
        { name: 'C', value: 30, color: '#ffd700' }
      ], // 伪造的假数据
      yAxisMaxLine: 100,
      yAxisMinLine: 0,
      yAxisUnitLine: '%',
      lineChartData: [
        { name: 'A', value: 10, color: '#ff4500' },
        { name: 'B', value: 20, color: '#ff8c00' },
        { name: 'C', value: 30, color: '#ffd700' }
      ], // 伪造的假数据
    };
  },

  computed: {

  },
  components: {
    VueDraggableResizable
  },

  methods: {
    // 关闭弹窗
    handleClose() {
      this.energyModel = false
    },
    handleClosePie() {
      this.energyModelPie = false
    },
    handleCloseLine() {
      this.energyModelLine = false
    },
    handleCloseText() {
      this.showTextDialog = false
    },
    handleCloseUpload() {
      this.uploadDialogVisible = false;
    },
    // 上传背景图
    handleUpload(file) {
      if (!file.type.startsWith("image/")) {
        this.$message.error("只能上传图片！");
        return false;
      }

      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.backgroundImage = reader.result;
        this.uploadDialogVisible = false;
        this.$message.success("背景图片上传成功！");
      };
      return false; // 阻止自动上传
    },
    // 添加echarts图
    addChart(type) {
      if (type === 'pie') {
        this.pendingChartType = type;
        this.energyModelPie = true;
      }
      if (type == 'bar') {
        this.pendingChartType = type;
        this.energyModel = true;
      }
      if (type == 'line') {
        this.pendingChartType = type;
        this.energyModelLine = true;
      }
      /* else {
        const id = this.chartCounter++;
        this.charts.push({ id, type, width: 400, height: 300, x: 100, y: 100 });
        this.$nextTick(() => this.initChart(id, type));
        this.handleClose()
        this.handleClosePie()
        this.handleCloseLine()
      } */
    },
    // 饼状图确定
    confirmPieChart() {
      const id = this.chartCounter++;
      const data = this.pieChartData.map(item => ({
        name: item.name,
        value: parseFloat(item.value),
        color: item.color
      }));

      this.charts.push({ id, type: 'pie', width: 400, height: 300, x: 100, y: 100, data });
      this.$nextTick(() => this.initChart(id, 'pie'));
      this.dialogVisible = false;
      this.pieChartData = [
        { name: 'A', value: 10, color: '#ff4500' },
        { name: 'B', value: 20, color: '#ff8c00' },
        { name: 'C', value: 30, color: '#ffd700' }
      ]; // 重置为初始假数据
      this.energyModelPie = false;
    },
    // 柱状图确认
    confirmBarChart() {
      const id = this.chartCounter++;
      const data = this.barChartData.map(item => ({
        name: item.name,
        value: parseFloat(item.value),
        color: item.color
      }));
      this.charts.push({
        id,
        type: 'bar',
        width: 400,
        height: 300,
        x: 100,
        y: 100,
        data,
        yAxisMinBar: this.yAxisMinBar,
        yAxisMaxBar: this.yAxisMaxBar,
        yAxisUnitBar: this.yAxisUnitBar
      });
      this.$nextTick(() => this.initChart(id, 'bar'));
      this.handleClose()
      this.barChartData = [
        { name: 'A', value: 10, color: '#ff4500' },
        { name: 'B', value: 20, color: '#ff8c00' },
        { name: 'C', value: 30, color: '#ffd700' }
      ]; // 重置为初始假数据
      this.yAxisMinBar = 0
      this.yAxisMaxBar = 100
      this.yAxisUnitBar = "%"
    },
    // 曲线图确认
    confirmLineChart() {
      const id = this.chartCounter++;
      const data = this.barChartData.map(item => ({
        name: item.name,
        value: parseFloat(item.value),
        color: item.color
      }));
      this.charts.push({
        id,
        type: 'bar',
        width: 400,
        height: 300,
        x: 100,
        y: 100,
        data,
        yAxisMinLine: this.yAxisMinLine,
        yAxisMaxLine: this.yAxisMaxLine,
        yAxisUnitLine: this.yAxisUnitLine
      });
      this.$nextTick(() => this.initChart(id, 'line'));
      this.handleCloseLine()
      this.lineChartData = [
        { name: 'A', value: 10, color: '#ff4500' },
        { name: 'B', value: 20, color: '#ff8c00' },
        { name: 'C', value: 30, color: '#ffd700' }
      ]; // 重置为初始假数据
      this.yAxisMinLine = 0
      this.yAxisMaxLine = 100
      this.yAxisUnitLine = "%"
    },
    // 饼状图添加一行新数据
    addPieChartData() {
      this.pieChartData.push({ name: '', value: '', color: '#000000' });
    },
    // 柱状图添加一行新数据
    addBarChartData() {
      this.barChartData.push({ name: '', value: '', color: '#000000' });
    },
    // 曲线图添加一行新数据
    addLineChartData() {
      this.lineChartData.push({ name: '', value: '', color: '#000000' });
    },
    // 饼状图删除一行数据
    removePieChartData(index) {
      this.pieChartData.splice(index, 1);
    },
    // 柱状图删除一行数据
    removeBarChartData() {
      this.barChartData.splice(index, 1);
    },
    // 曲线图删除一行数据
    removeLineChartData() {
      this.lineChartData.splice(index, 1);
    },
    // 添加文本
    addText() {
      if (!this.textContent.trim()) return;
      const id = this.textCounter++;
      this.texts.push({ id, content: this.textContent, color: this.textColor, width: 150, height: 50, x: 200, y: 200 });
      this.textContent = '';
      this.textColor = '#000000';
      this.showTextDialog = false;
    },
    // 移除echarts图
    removeChart(id) {
      if (this.chartInstances[id]) {
        this.chartInstances[id].dispose();
        delete this.chartInstances[id];
      }
      this.charts = this.charts.filter(chart => chart.id !== id);
    },
    // 移除文本
    removeText(id) {
      this.texts = this.texts.filter(text => text.id !== id);
    },
    // 保存添加新图
    setChartRef(el, id) {
      if (el) {
        this.$nextTick(() => this.initChart(id, this.charts.find(chart => chart.id === id)?.type));
      }
    },
    // 初始化echarts图
    initChart(id, type) {
      this.$nextTick(() => {
        const chartIndex = this.charts.findIndex(chart => chart.id === id);
        if (chartIndex !== -1) {
          const container = this.$el.querySelectorAll('.chart-box')[chartIndex];
          if (container && !this.chartInstances[id]) {
            this.chartInstances[id] = echarts.init(container);
            let option = {};
            if (type === 'bar') {
              const chart = this.charts.find(chart => chart.id === id);
              option = {
                tooltip: {},
                xAxis: {
                  type: 'category',
                  data: chart.data.map(item => item.name),
                  axisLabel: {
                    color: '#ffffff' // 设置x轴文字颜色为白色
                  }
                },
                yAxis: {
                  type: 'value',
                  min: chart.yAxisMinBar,
                  max: chart.yAxisMaxBar,
                  axisLabel: {
                    formatter: `{value} ${chart.yAxisUnitBar}`,
                    color: '#ffffff' // 设置y轴文字颜色为白色
                  },
                  splitLine: {
                    lineStyle: {
                      // 设置背景横线
                      color: "#3b44534b",
                    },
                  },
                },
                series: [{
                  type: 'bar',
                  data: chart.data.map(item => item.value),
                  itemStyle: {
                    color: params => chart.data[params.dataIndex].color
                  }
                }]
              };
            } else if (type === 'pie') {
              const chart = this.charts.find(chart => chart.id === id);
              option = {
                tooltip: { trigger: 'item' },
                legend: {
                  top: '5%',
                  left: 'center',
                  textStyle: {
                    color: '#ffffff' // 设置图例文字颜色为红色
                  }
                },
                series: [{
                  type: 'pie',
                  radius: ['40%', '70%'],
                  label: {
                    show: false,
                    position: 'center'
                  },
                  data: chart.data.map(item => ({
                    name: item.name,
                    value: item.value
                  })),
                  itemStyle: {
                    color: params => chart.data[params.dataIndex].color
                  }
                }]
              };
            } else if (type === 'line') {
              const chart = this.charts.find(chart => chart.id === id);
              option = {
                tooltip: {},
                xAxis: {
                  type: 'category',
                  data: chart.data.map(item => item.name),
                  axisLabel: {
                    color: '#ffffff' // 设置x轴文字颜色为白色
                  }
                },
                yAxis: {
                  type: 'value',
                  min: chart.yAxisMinLine,
                  max: chart.yAxisMaxLine,
                  axisLabel: {
                    formatter: `{value} ${chart.yAxisUnitLine}`,
                    color: '#ffffff' // 设置y轴文字颜色为白色
                  },
                  // 测试整理代码     
                  splitLine: {
                    lineStyle: {
                      // 设置背景横线
                      color: "#3b44534b",
                    },
                  },
                },
                series: [{
                  type: 'line',
                  data: chart.data.map(item => item.value),
                  itemStyle: {
                    color: params => chart.data[params.dataIndex].color
                  }
                }]
              };
            }
            this.chartInstances[id].setOption(option);
          }
        }
      });
    },
    // 监听位置
    onResize(id, newWidth, newHeight) {
      const chart = this.charts.find(chart => chart.id === id);
      if (chart) {
        chart.width = newWidth;
        chart.height = newHeight;
        if (this.chartInstances[id]) {
          this.$nextTick(() => this.chartInstances[id].resize());
        }
      }
    },
    // 监听拖拽
    onDrag(id, x, y) {
      const chart = this.charts.find(chart => chart.id === id);
      if (chart) {
        chart.x = x;
        chart.y = y;
      }
    },
    onTextDrag(id, x, y) {
      const text = this.texts.find(text => text.id === id);
      if (text) {
        text.x = x;
        text.y = y;
      }
    },
  },
  mounted() {
    bus.$on('model-event', (data) => {
      switch (data.model) {
        case 0:
          this.title = "上传背景图";
          this.uploadDialogVisible = true
          break;
        case 1:
          this.title = "创建饼状图";
          //this.energyModelPie = true
          this.addChart('pie')
          break;
        case 2:
          this.title = "创建柱状图";
          //this.energyModel = true
          this.addChart('bar')
          break;
        case 3:
          this.title = "创建曲线图";
          //this.energyModelLine = true
          this.addChart('line')
          break;
        case 4:
          this.title = "创建报表";
          //this.energyModelLine = true
          break;
        case 5:
          this.title = "创建超链接";
          // this.energyModelLine = true
          break;
        case 6:
          this.title = "创建文本";
          this.showTextDialog = true
          break;
        default:
          this.title = "其他图形";
          break;
      }
    });
  },
  beforeDestroy() {
    bus.$off('model-event'); // 清理事件监听器，防止内存泄漏
  }
};
</script>

<style scoped>
span {
  font-size: 10px;
  color: #fff;
}

.delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: red;
  color: white;
  border: none;
  padding: 5px;
  cursor: pointer;
}

.chart-box {
  width: 100%;
  height: 100%;
}

.asset-management {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  box-sizing: border-box;
  display: flex;
  color: #fff;
  padding: 10px 10px;
}

.addDataBtnBox {
  position: absolute;
  top: 11px;
  right: 47px;
  cursor: pointer;
}

.item-box {
  width: 100%;
  padding: 5px 5px;
  display: flex;
  align-items: center;
}

.inp-box {
  width: 150px;
}

.data-box {
  width: 100%;
  height: 180px;
}

.text-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
}

.upload-bg /deep/ .upload-box {
  height: 200px;
}
</style>
<style>
.el-table tbody tr:hover>td {
  background-color: #3B4453 !important
}

/* 表格背景色*/
.el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

.el-table tr {
  background-color: transparent !important;
}

.el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent !important;
}

/* 去掉底部白线*/
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

/* 字体颜色*/
.el-table tr {
  background-color: transparent !important;
  color: #f0f0f0 !important;
  font-size: 11px !important;
}

.el-table__body tr,
.el-table__body td {
  border-left: 1px solid #383639 !important;
}

/* 右 边线 颜色*/
.el-table--border:after,
.el-table--group:after,
.el-table:before {
  background-color: transparent !important;
}

/* 四 边线 颜色*/
.el-table--border,
.el-table--group {
  border-color: transparent !important;
}

/**
  改变表格内行线颜色
 */
.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #383639 !important;
}

.el-table thead tr th {
  border-color: #3B4453 !important;
}

/*
改变表格内竖线颜色
*/
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
  border-right: 1px solid #383639 !important;
}

/**
改变边框颜色
 */
.el-table--border,
.el-table--group {
  border: 1px solid transparent !important;
}

/**
  表格的行高
 */
.el-table__body tr,
.el-table__body td {
  padding: 0 !important;
  height: 30px !important;
}

.el-tree {
  background-color: transparent !important;
  color: #f0f0f0 !important;

}

.el-tree-node__label {
  font-size: 11px !important;
}

.el-tree-node__content:hover {
  background-color: #3B4453 !important;
}

.el-tree-node:focus>.el-tree-node__content {
  background-color: #3B4453;
}

.el-switch__label {}

.el-switch__label * {
  font-size: 11px !important;
}

.el-tabs__item {
  font-size: 11px !important;
  color: #ffffff !important;
  width: 47%;
  text-align: center;
  height: 31px !important;
}

.el-tabs__item:hover {
  color: #1890FF !important;
}

.el-tabs__item.is-active {
  color: #1890ff !important;
}

.el-tabs__active-bar {
  height: 1px !important;
}

.el-tabs__nav-wrap::after {
  height: 1px !important;
  background-color: #383639;
}

.el-tabs__nav-scroll {
  width: 47vw !important;
}

.el-calendar-table .el-calendar-day {
  height: 27px !important;
}

.el-calendar {
  background-color: transparent !important;
}

.el-calendar-table .el-calendar-day:hover {
  background-color: #2C3440 !important;
}

.el-calendar-table td.is-selected {
  background-color: #2C3440 !important;
}

.el-calendar__title {
  color: #ffffff;
}

.el-calendar__header {
  padding: 3px 0px;
  border-bottom: 1px solid transparent;
  display: none;
}

.el-calendar-table thead th {
  text-align: center;
  color: #ffffff;
}

.el-calendar-table tr:first-child td {
  border-top: 1px solid #383639;
}

.el-calendar-table td {
  border-bottom: 1px solid #383639;
  border-right: 1px solid #383639;
}

.el-calendar-table tr td:first-child {
  border-left: 1px solid #383639;
}

.el-calendar-table:not(.is-range) td.prev,
.el-calendar-table:not(.is-range) td.next {
  color: #505050;
}

.el-calendar-table thead th {
  border: 1px solid #383639;
}

.el-calendar__body {
  padding: 0px 0px 0px !important;
}

.el-calendar__button-group {
  display: none;
}

.el-calendar-table thead th {
  padding: 7px 0 !important;
}

.el-input__inner {
  font-size: 11px !important;
}

.ba {
  color: #3b44534b;
}
</style>